<template>
	<view class="ending">
		<image src="https://siha.vxmeng.com/static/index/ending-bg.png" mode="widthFix"></image>
		<view class="box">
			<image src="https://siha.vxmeng.com/static/index/box_bg.png" mode="widthFix"></image>
			<image :src="ending == 0?'https://siha.vxmeng.com/static/index/xin.png':'https://siha.vxmeng.com/static/index/yun.png'" mode="aspectFit"></image>
			<view class="text">
				真爱的旅程终于达到了它的美丽彼岸。你和[角色名]的故事是关于勇气、成长和真爱的传说。这一刻的到来，全赖于你的选择和坚持。
				嘶哈的世界因你而更加灿烂。期待你在新的故事中，再次找到爱与冒险~
			</view>
			<view class="btns">
				<view class="btn" @click="">{{ending == 0?$t('index.qx'):'就这样吧'}}</view>
				<view class="btn" @click="">{{ending == 0?'继续前行':'再次出发'}}</view>
			</view>
		</view>
		
		<view class="score">
			<view class="s">5s</view>
			<view class="tit">评分</view>
			<view class="intro">留下您的评分</view>
			<view class="imgs">
				<image v-for="(item,index) in 5" :src="(index+1)*2>score?'https://siha.vxmeng.com/static/more/no.png':'https://siha.vxmeng.com/static/more/on.png'"
					mode="widthFix" @click="onScoring(index)"></image>
			</view>
			<input type="text" placeholder="说两句吧"/>
			<view class="btns">
				<view class="btn" @click="">{{$t('index.qx')}}</view>
				<view class="btn" @click="">{{$t('grzx.qr')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 7,
				ending: 0,//0是HE，1是BE
			}
		},
		onLoad(options) {
			this.ending = options.ending || 1;
		},
		methods: {
			onScoring(index){
				this.score = (index + 1)*2
			}
		}
	}
</script>

<style lang="less" scoped>
	.ending{
		position: relative;
		width: 100vw;
		height: 100vh;
		>image{
			width: 100%;
			position: absolute;
			z-index: -1;
		}
		.box{
			width: 320px;
			padding: 30px 20px 20px;
			border-radius: 12px;
			background-color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			image{
				position: absolute;
				top: -40px;
				left: -4px;
				width: 340px;
				&:nth-child(2){
					top: -26px;
					left: 210px;
					width: 145px;
					height: 62px;
				}
			}
			.text{
				color: #666666;
				font-size: 14px;
			}
			.btns{
				height: 38px;
				width: 208px;
				margin: 16px auto 0;
				display: flex;
				justify-content: space-between;
				.btn{
					width: 96px;
					height: 100%;
					text-align: center;
					line-height: 38px;
					border: 2px solid #666;
					border-radius: 19px;
					&:last-child{
						border: none;
						color: #fff;
						background: linear-gradient(289deg, #62B6FC 0%, #5F58FD 76%, #5F58FD 98%);
					}
				}
			}
		}
		.score{
			width: 192px;
			height: 186px;
			padding: 12px;
			color: #D8D8D8;
			font-size: 12px;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
			background: linear-gradient(135deg, rgba(0, 0, 0, 0.5647) -6%, rgba(0, 0, 0, 0.6126) 97%, rgba(30, 36, 44, 0.65) 97%);
			.s{
				text-align: end;
				font-size: 10px;
				color: #AAAAAA;
			}
			.tit{
				font-size: 14px;
				text-align: center;
			}
			.intro{
				font-size: 12px;
				margin-top: 10px;
			}
			.imgs{
				margin-top: 10px;
				image {
					width: 20px;
					margin-left: 8px;
				}
			}
			input{
				width: 157px;
				height: 25px;
				border-radius: 13px;
				background: #484A4D;
				padding: 4px 10px;
				box-sizing: border-box;
				margin-top: 10px;
			}
			.btns{
				width: 168px;
				height: 26px;
				margin-top: 10px;
				display: flex;
				justify-content: space-evenly;
				
				.btn{
					width: 56px;
					height: 26px;
					line-height: 26px;
					text-align: center;
					border-radius: 13px;
					border: 2px solid #fff;
					&:last-child{
						border: none;
						background: linear-gradient(292deg, #62B6FC 0%, #5F58FD 76%, #5F58FD 97%);
					}
				}
			}
		}
	}
</style>

